<script setup lang="ts">
import { ref } from "vue";
</script>

<template>
  <div style="width: 380px; background-color: #fff">
    <div
      style="
        font-weight: bold;
        color: #333333;
        padding: 15px 0 13px 17px;
        border-bottom: 1px solid #e5e5e5;
      "
    >
      数据统计
    </div>
    <div>
      <div style="display: flex; justify-content: space-evenly">
        <div v-for="item in 4" style="margin: 34px 0; text-align: center">
          <img
            src="@/assets/images/Community/huiyuan.png"
            alt=""
            style="width: 19.8px; height: 19.01px"
          />
          <div>会员</div>
          <div>76890</div>
        </div>
      </div>
      <div style="display: flex; justify-content: center">
        <div
          style="
            width: 92px;
            height: 36px;
            line-height: 36px;
            background: #fd992b;
            text-align: center;
            cursor: pointer;
            border-radius: 20px 20px 20px 20px;
          "
        >
          <img
            src="@/assets/images/Community/fatie.png"
            alt=""
            style="width: 14px"
          />
          <span class="text">发帖</span>
        </div>
        <div
          style="
            width: 92px;
            height: 36px;
            line-height: 36px;
            background: #34b8fa;
            text-align: center;
            cursor: pointer;
            margin-left: 20px;
            border-radius: 20px 20px 20px 20px;
          "
        >
          <img
            src="@/assets/images/Community/qiandao.png"
            alt=""
            style="width: 14px"
          />
          <span class="text">签到</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.text {
  margin-left: 5px;
  color: #fff;
}
</style>
